{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}

<!--下面 每个页面的特色css-->
{block name="titleStyle"}
<style type="text/css">
	.one{
	   width: 140px;
	   height: 140px;
	   margin: 20px;
	   background: #9999CC;
	   border: #000 1px solid;
	   float:left;
	   font-size: 17px;
	   font-family:Roman;
   }


</style>
{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)"  id="b1"/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)"  id="b2"/>
<input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) "  id="b3"/>
<input type="button" 
	value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它" 
							  id="b4"/>
<input type="button" 
	value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false" 
							  id="b5"/>
<div id="first" >
	first
</div>



<br>
<a href="www.sohu.com" class="one">sohu</a>

<h6>代码</h6>
<pre>
		&lt;input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)"  id="b1"/&gt;
		&lt;input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)"  id="b2"/&gt;
		&lt;input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) "  id="b3"/&gt;
		&lt;input type="button" 
			value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它" 
									  id="b4"/&gt;
		&lt;input type="button" 
			value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false" 
									  id="b5"/&gt;
		&lt;div id="first" &gt;
			first
		&lt;/div&gt;
		
		js
		
		&lt;script language="javascript"&gt;
		window.onload = function () {  //先加载页面内容 再加载js
			  //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
			  
			  $('#b1').click(
			  function (){
				  $('#first').attr("class","one");
			  }
			  );
				  
			  
		 
			  //追加样式: addClass() 
			 $('#b2').click(
			  function (){
				  $('#first').addClass("one");
			  }
			  );
			 
			 //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 
			$("#b3").click(
			function(){
				$("#first").removeClass("one");
			}
			);
			 
			 //切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
			$("#b4").click(
			function(){
				$("#first").toggleClass("one");
			}
			);
			 
			//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
			$("#b5").click(
			function(){
				alert($("#first").hasClass("one"));
			}
			);
		
			$href = $('a').attr('href');
			alert('class的获取可以用attr：   '+$href);
			$css = $('a').attr('class');
			alert('class的获取可以用attr：   '+$css);
			
		}
		&lt;/script&gt;




	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
window.onload = function () {  //先加载页面内容 再加载js
	  //获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
	  
	  $('#b1').click(
	  function (){
	  	$('#first').attr("class","one");
	  }
	  );
	  	
	  
 
	  //追加样式: addClass() 
     $('#b2').click(
	  function (){
	  	$('#first').addClass("one");
	  }
	  );
	 
	 //移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 
	$("#b3").click(
	function(){
		$("#first").removeClass("one");
	}
	);
	 
	 //切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
	$("#b4").click(
	function(){
		$("#first").toggleClass("one");
	}
	);
	 
	//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
	$("#b5").click(
	function(){
		alert($("#first").hasClass("one"));
	}
	);


}
</script> {/block}